<template>
  <div class="help">
    <div class="header">
      <div class="face_word1">
        <span>帮助与文档</span>
      </div>
      <div class="face_word2">
        <p>区块链版权存证平台将给您提供全面的应用帮助和技术支持</p>
      </div>
    </div>
    <div style="height: 50px"></div>
    <div class="help_body">
      <div class="helpRow">
        <div class="help_word">
          <div class="helpWordTit" @click="goDoc">产品简介</div>
          <p v-for="(item, index) in dec" :key="index">{{ item }}</p>
          <div class="show" onclick="">
            更多
            <el-icon style="vertical-align: middle">
              <ArrowDownBold />
            </el-icon>
          </div>
          <!-- <div class="show" v-else>
            收起
            <el-icon style="vertical-align: middle">
              <ArrowUpBold />
            </el-icon>
          </div> -->
        </div>
        <div class="help_word">
          <div class="helpWordTit">操作指南</div>
          <p v-for="(item, index) in nav" :key="index">{{ item }}</p>
          <div class="show">
            更多
            <el-icon style="vertical-align: middle">
              <ArrowDownBold />
            </el-icon>
          </div>
          <!-- <div class="show">收起 <el-icon style="vertical-align: middle;">
                            <ArrowUpBold />
                        </el-icon></div> -->
        </div>
        <div class="help_word">
          <div class="helpWordTit">产品简介</div>
          <p v-for="(item, index) in qui" :key="index">{{ item }}</p>
          <div class="show" v-if="dec.length <= 4">
            更多
            <el-icon style="vertical-align: middle">
              <ArrowDownBold />
            </el-icon>
          </div>
          <div class="show" v-else>
            收起
            <el-icon style="vertical-align: middle">
              <ArrowUpBold />
            </el-icon>
          </div>
        </div>
      </div>
      <div style="height: 30px"></div>
      <div class="help_wordLast">
        <div class="helpWordTit">常见问题</div>
        <p>常见问题</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();

let dec = reactive(["产品简介", "产品优势", "应用场景", "基础术语"]);
let nav = reactive(["登录注册", "身份认证", "存证中心", "应用中心"]);
let qui = reactive(["快速开始", "接入指导", "API概览", "存证中心"]);
const goDoc = () => {
  router.push('/homeview/doc')
};
</script>

<style scoped>
.help {
  position: relative;
}

.header {
  width: 100%;
  height: 400px;
  background-image: url("../../../public/Sence-pic/u360_state0.png");
  background-position: left top;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-size: cover;
}

.help_body {
  height: 550px;
  width: 70%;
  margin: auto;

  position: relative;
  top: 20px;
  margin: auto;
  background-color: rgba(255, 255, 255, 0);
  border: none;
  border-radius: 0px;
}

.face_word1 {
  border-width: 0px;
  position: absolute;
  left: 166px;
  top: 93px;
  width: 256px;
  height: 57px;
  font-family: "Arial Normal", "Arial";
  font-weight: 400;
  font-style: normal;
  font-size: 48px;
  color: #f2f2f2;
}

.face_word2 {
  border-width: 0px;
  position: absolute;
  left: 166px;
  top: 179px;
  width: 811px;
  height: 28px;
  font-family: "Arial Normal", "Arial";
  font-weight: 500;
  font-style: normal;
  color: #f2f2f2;
  line-height: 28px;
}

.face_word2 p {
  font-size: 18px;
  font-weight: 500;
}

.help_word {
  width: 15%;
  color: #333333;
  font-family: "Arial Normal", "Arial";
}

.help_word p {
  cursor: pointer;
  font-size: 14px;
  line-height: 50px;
  border-bottom: 1px solid #f2f2f2;
}

.help_word p:hover {
  color: rgb(15, 126, 219);
}

.helpWordTit {
  cursor: pointer;
  color: #000;
  font-size: 16px;
  line-height: 50px;
}

.show {
  color: rgb(15, 126, 219);
  cursor: pointer;
  line-height: 50px;
}

.helpRow {
  display: flex;
  justify-content: space-between;
}

.help_wordLast {
  width: 15%;
  cursor: pointer;
  font-size: 14px;
  line-height: 50px;
  border-bottom: 1px solid #f2f2f2;
}

.help_wordLast p:hover {
  color: rgb(15, 126, 219);
}
</style>